<template>
  <div id="container">
    <v-container>
      <v-row>
        <v-col cols="2">
          <v-sheet style="overflow-y: auto;overflow-x: hidden" height="85vh" rounded="sm">

            <v-list color="transparent" nav dense>
              <template v-for="(nav,nk) in navs" >
                <v-subheader v-text="nav.title"></v-subheader>
                <v-list-item-group
                    color="primary"
                >
                  <v-list-item v-for="link in nav.links" :key="link.to" :to="link.to">
                    <v-list-item-icon>
                      <icon :name="link.icon"></icon>
                    </v-list-item-icon>
                    <v-list-item-title   v-text="link.name"></v-list-item-title>
                  </v-list-item>
                </v-list-item-group>
              </template>
            </v-list>
          </v-sheet>
        </v-col>

        <v-col>
          <v-sheet
              height="85vh"
              rounded="sm"
              style="overflow-y: auto;overflow-x: hidden"
          >
            <transition name="scroll-x-reverse-transition" mode="out-in" appear>
              <router-view></router-view>
            </transition>
          </v-sheet>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
export default {
  name: 'Container',
  data() {
    return {
      navs:[
        {
          title:'文章管理',
          links:[
            {
              name: '新建文章',
              icon: 'edit-box-line',
              to: '/content/write'
            },
            {
              name: '文章列表',
              icon: 'list-unordered',
              to: '/content/list'
            },
            {
              name: '回收站',
              icon: 'delete-bin--line1',
              to: '/content/dustbin'
            }
          ]
        },
        {
          title:'页面管理',
          links: [
            {
              name: '页面列表',
              icon: 'list-unordered',
              to: '/content/page-list'
            },
            {
              name: '新建页面',
              icon: 'link-unlink',
              to: '/content/page-new'
            },
          ]
        },
        {
          title: '分类管理',
          links:[
            {
              name: '分类列表',
              icon: 'list-check-',
              to: '/content/category-list'
            },
            {
              name: '新建分类',
              icon: 'play-list-add-line',
              to: '/content/category-new'
            },
          ]
        },
        {
          title: '标签管理',
          links:[
            {
              name: '标签列表',
              icon: 'price-tag--line',
              to: '/content/tag-list'
            },
            {
              name: '新建标签',
              icon: 'hashtag',
              to: '/content/tag-new'
            }
          ]
        },
        {
          title: '评论管理',
          links:[
            {
              name: '评论管理',
              icon: 'discuss-line',
              to: '/content/leave-msg'
            }]
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>
